<template>
  <div class="string-time">
    <a-button type="primary" @click="handleAdd">添加</a-button>
    <a-table :columns="tableColumns" :dataSource="tableData" rowKey bordered>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.dataIndex === 'time'">
          <template v-if="editIndex === index">
            <a-input
              v-model:value="tableData[index].time"
              type="time"
            ></a-input>
          </template>
          <template v-else>{{ text }}</template>
        </template>
        <div v-else-if="column.dataIndex === 'operator'">
          <a-button
            type="primary"
            style="margin-right: 10px"
            @click="handleEdit(text, record, index, column)"
            >修改</a-button
          >
          <a-popconfirm
            title="确定要删除吗?"
            @confirm="handleDel(text, record, index, column)"
          >
            <a-button type="primary" danger>删除</a-button>
          </a-popconfirm>
        </div>
        <!-- <div v-else>{{text}}></div> -->
      </template>
    </a-table>
    <div class="string-time-content">
        <div class="stc-label">平均：</div>
        <div class="stc-value">{{ averageTime }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'

const tableColumns = ref([
  {
    title: '序号',
    customRender: ({ _, __, index }) => index + 1,
    align: 'center',
    width: '80px',
  },
  { title: '时间', dataIndex: 'time' },
  { title: '操作', dataIndex: 'operator', width: '180px' },
])
const tableData = ref([
  { id: 1, time: '00:00' },
])
const editIndex = ref(0)
// const averageTime = ref('')
const averageTime = computed(() => {
    return comTime(tableData.value.map(item => item.time))
})

const comTime = (timeList: string[]): string => {
    const newTime:[number, number] = timeList.reduce((pre, cur) => {
        const time = cur.split(':')
        pre[0] += parseInt(time[0])
        pre[1] += parseInt(time[1])
        return pre
    }, [0, 0])
    newTime[1] = newTime[1] / timeList.length
    const jin = Math.floor(newTime[1] / 60)
    newTime[1] = newTime[1] % 60
    newTime[0] = newTime[0] / timeList.length + jin
    return newTime.join(':')
}
const handleAdd = () => {
    tableData.value.push({ id: (tableData.value[tableData.value.length - 1]?.id || -1) + 1, time: '00:00' })
    editIndex.value = tableData.value.length - 1
}
const handleEdit = (text, record, index, column) => {
  console.log('handleDel', text, record, index, column)
  editIndex.value = index
}
const handleDel = (text, record, index, column) => {
  console.log('handleDel', text, record, index, column)
  tableData.value.splice(index, 1)
}
</script>
<style lang="scss" scoped>
.string-time {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    align-content: flex-start;
    .string-time-content {
        display: flex;
        gap: 16px;
        .stc-label {
            width: 200px;
            text-align: right;
            font-weight: 600;
            font-size: 20px;
        }
    }
}
</style>
